<template>
  <div class="review">
    <div class="send-review w-full">
      <div class="flex items-end border-b-2 border-red pb-2 mb-4" v-if="isTitleNav">
        <span class="text-xl" id="comment">评论</span>
        <span class="text-xs pl-2 yu-titleColor">共{{ store.commentData?.total }}条评论</span>
      </div>
      <div class="send flex" v-if="store.token">
        <div class="w-10 h-10">
          <img class="w-full h-full" :src="store.userInfo?.avatarUrl" alt="">
        </div>
        <div class="flex-1">
          <div>
            <van-cell-group inset>
              <van-field
                  v-model="message"
                  rows="2"
                  autosize
                  type="textarea"
                  maxlength="140"
                  placeholder="请输入评论"
                  show-word-limit
              />
            </van-cell-group>
          </div>
          <div class="flex flex-row-reverse mr-4 mt-2">
            <YuButton @click="sendReview">评论</YuButton>
          </div>
        </div>
      </div>
    </div>
    <!-- 热门评论 -->
    <ReviewType v-if="isHotReview" :review="store.commentData?.hotComments" title="热门评论"/>
    <!-- 精彩评论 -->
    <ReviewType :review="store.commentData?.comments" title="精彩评论">
      <template v-slot:page v-if="store.commentData?.total > 20">
        <van-pagination
            class="van-pagination"
            v-model="currentPage"
            :total-items="store.commentData?.total"
            force-ellipses
            :show-page-size="5"
            @change="paginationChange"
        >
          <template #prev-text>
            <van-icon name="arrow-left" />
          </template>
          <template #next-text>
            <van-icon name="arrow" />
          </template>
          <template #page="{ text }">{{ text }}</template>
        </van-pagination>
      </template>
    </ReviewType>
  </div>
</template>

<script setup>
import {useStore} from "@/store/index";
import {reactive, toRefs} from "vue";
import {Notify} from "vant";
import ReviewType from './components/ReviewType/index.vue'
import YuButton from '@/components/YuButton/index.vue'

const data = reactive({
  message: '', // 评论信息
  currentPage: 1 // 默认展示第几个分页
})
const { message, currentPage } = toRefs(data)

const store = useStore()

// 发送评论
// 可以发送删除回复评论 params = {
// t: 1 发送 2 回复 0 删除， type: 用来判断是0：歌曲还是2：歌单还是其他的,
// id: 对应资源id, content: 要发送的内容， 如果如果要是删除的话这个id是不需要的，
// commentId: 回复评论的id，也是删除的id
// }
const sendReview = async () => {
  if (data.message) {
    let params = { t: 1, type: 2, content: data.message }
    const { type } = store.currentInfo
    const currentType = {
      0: () => {
        // 设置歌曲的type
        params.type = 0
      },
      1: () => {
        // 设置歌单的type
        params.type = 2
      },
      2: () => {
        // 设置专辑的type
        params.type = 3
      },
      6: () => {
        // 设置电台的评论
        params.type = 4
      },
      // 发送动态评论
      7: () => {
        params.type = 6
      },
      // 发送Mv的评论
      10: () => {
        params.type = 1
      },
      // 发送视频的评论
      11: () => {
        params.type = 5
      }
    }
    currentType && currentType[type] && currentType[type]()
    // 发送评论
    await store.sendOrDelComment(params)
    // 清空发送框
    data.message = ''
  } else {
    Notify({
      message: '请输入内容',
      background: '#fd0000',
      color: '#ffffff'
    })
  }
}


// 页码变化的时候触发
const paginationChange = (value) => {
  const { type } = store.currentInfo
  // 第一个参数是偏移量
  let num = value - 1
  // 切换下一页的时候需要上一页最后一条数据的time所以需要before, 当num为0时不需要before
  const before = num ? store.commentData.comments[store.commentData.comments.length - 1].time : null
  store.page = {
    num,
    before,
    limit: 20
  }
  const dataType = {
    // 歌曲
    0: () => {
      store.getCommentMusic()
    },
    // 歌单
    1: () => {
      console.log(11)
      store.getCommentPlaylist()
    },
    // 专辑
    2: () => {
      store.getCommentAlbum()
    },
    // 电台节目评论
    6: () => {
      store.getCommentDj()
    },
    // Mv评论
    10: () => {
      store.getCommentMv()
    },
    // 视频评论
    11: () => {
      store.getCommentVideo()
    }
  }
  dataType && dataType[type] && dataType[type]()
}
defineProps({
  // 是否显示顶部title
  isTitleNav: {
    type: Boolean,
    default: true
  },
  // 是否显示热门评论
  isHotReview: {
    type: Boolean,
    default: true
  }
})
</script>

<style scoped lang="scss">
:deep(.van-pagination) {
  .van-pagination__item--active {
    background-color: #ff9292 !important;
    color: white !important;
  }
  .van-pagination__item--page, .van-pagination__item--next, .van-pagination__item--prev {
    color: #ff9292;
  }
}
</style>
